<template>
    <div class="assistant">
        <div class="aiSwitchList" v-for="(item, id) in aiSwitchList" :key="id">
             <span><img v-lazy="item.imgSrc" alt="">{{item.content}}</span>
             <div class="aiSwitch">
                 <span v-show="item.switch" @click="no(item.id)"><img src="http://rs.static.quanc.com.cn/activies/aiAssistant/open.png" alt=""></span>
                 <span v-show="!item.switch" @click="off(item.id)"><img src="http://rs.static.quanc.com.cn/activies/aiAssistant/off.png" alt=""></span>
             </div>
        </div>
        <div class="start">
            <span v-show="isStart" @click="start"><img src="http://rs.static.quanc.com.cn/activies/aiAssistant/startDark.png" alt=""></span>
            <span v-show="!isStart"><img src="http://rs.static.quanc.com.cn/activies/aiAssistant/startLight.png" alt=""></span>
            <p><!--点击开启--></p>
        </div>
        <div class="aiList">
            <div class="aiTab">
                <div class="reportForm" v-for="(items, index) in aiTabList" :key="index">
                    <span :class="{'active':items.isActive}" @click="toggleBar(index)">{{items.tabText}} <div class="arrowDown" v-show="items.isActive"></div></span>
                </div>
            </div>
            <div class="reportFormContent" v-show="isShow[0]">
                <div class="reportFormBtn">
                    <span @click="newFind">最新发现</span>
                    <span @click="allFind">所有发现</span>
                </div>
                <div class="reportFormList">
                    <ul>
                        <li v-for="(item, index) in reportFormList" :key="index" @click="goDetail(item.id)">
                            <div class="rfContent">
                                <p>{{item.group_name}},{{item.sender}}对{{item.hit_words}}感兴趣</p>
                                <p>{{item.create_time | getFullTimes}}</p>
                            </div>
                            <div class="rfIcon">></div>         
                        </li>
                    </ul>
                </div>
                <!-- <div class='myChart' id="myChart" v-show="!ismyChart"></div> -->
                <!-- <div style="width: 100% height:6rem" v-show="ismyChart"> -->
                     <div class="showtip" v-show="!ismyChart">暂无数据！</div>
                    <div class='myChart' id="myChart" ></div>
                <!-- </div> -->
                <!-- <div style="width: 100% height:6rem" v-show="ismyCharts"> -->
                    <div class='myCharts' id="myCharts"></div>
                    <div class="showtip" v-show="!ismyCharts">暂无数据！</div>
                <!-- </div> -->
               
                
                
                 <!-- <div class='myCharts' id="myCharts" v-show="!ismyCharts"></div> -->
            </div>
            <div class="groupListContent" v-show="isShow[1]">
                <div class="showtip" v-if="showTips">暂无数据！</div>
                <div class="rank">
                    <ul
                            v-infinite-scroll="loadMore"
                            infinite-scroll-disabled="loading"
                            infinite-scroll-distance="20">
                        <li v-for="(item, index) in rankList" :key="index" @click="goGroupDetail(item.group_name, item.group_status)">
                            <span>
                                <div class="group_name">{{item.group_name}}</div>
                                <div class="group_count">过去一周{{item.group_count}}条发现</div>
                            </span>
                            <span>
                                <img src="http://rs.static.quanc.com.cn/activies/aiAssistant/open.png" alt="" v-show="item.group_status==1">
                                <img src="http://rs.static.quanc.com.cn/activies/aiAssistant/off.png" alt="" v-show="item.group_status==0">
                            </span>
                            <span>></span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="allPushContent" v-show="isShow[2]">
                <div class="area-title">
                    <span></span>内容全推<span></span>
                </div>
                <div class="allPushTit">
                    <span :class="{'edit1':allpush.activity1}">编 辑<br/>内 容</span>
                    <div class="arrow">
                        <img src="http://rs.static.quanc.com.cn/activies/aiAssistant/arrow.png" alt="">
                    </div>
                    <span :class="{'edit1':allpush.activity2}">受 众<br/>选 择</span>
                    <div class="arrow">
                        <img src="http://rs.static.quanc.com.cn/activies/aiAssistant/arrow.png" alt="">
                    </div>
                    <span :class="{'edit1':allpush.activity3}">开 始<br/>推 送</span>
                </div>
                <div class="allPushEdit" v-show="allpush.isShow1">
                    <div class="btns">
                        <em></em>
                        <span class="nextBtn" @click="next(1)">下一步</span>
                    </div>
                    <div class="allPushEditForm">
                        <div class="editForm">
                            <p>启始文案</p>
                            <textarea name="" id="" cols="30" rows="4" v-model="allpush.startText"></textarea>
                        </div>
                        <!-- <div class="editForm">
                            <p>链接文字</p>
                            <textarea name="" id="" cols="30" rows="2"></textarea>
                        </div> -->
                        <div class="editForm">
                            <p>链接</p>
                            <textarea name="" id="" cols="30" rows="2" v-model="allpush.link"></textarea>
                        </div>
                        <div class="editForm">
                            <p>结束文案</p>
                            <textarea name="" id="" cols="30" rows="2" v-model="allpush.endText"></textarea>
                        </div>
                        <div class="uploadImg">
                            <p>图片</p>
                            <img src="http://rs.static.quanc.com.cn/activies/aiAssistant/upImg.png" alt="">
                            <AliUpload :url="url" :multiple="multiple" :id='id' :len="len" @changeUrl="changeUrl"></AliUpload>
                            <div class="upImg">
                                <img :src="url[0]" alt="">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="allPushSelect" v-show="allpush.isShow2">
                    <div class="btns">
                        <span @click="top(1)">上一步</span>
                        <span class="nextBtn" @click="next(2)">下一步</span>
                    </div>
                    <div class="selectForm">
                        <div class="btnse">
                            <span @click="selGroup" :class="{'edit1':!selectGroup.isSelectGroup}">选择群</span>
                            <span class="nextBtn" @click="selFriend" :class="{'edit1':selectGroup.isSelectGroup}">选择好友</span>
                        </div>
                        <div class="btns"  v-show="!selectGroup.isSelectGroup">
                            <span>
                                <input type="checkbox" @click="selectallg" :checked="checked"/>全选
                            </span>
                        </div>
                        <div class="btns" v-show="selectGroup.isSelectGroup">
                            <span>
                                <input type="checkbox" @click="selectallf" :checked="checked"/>全选
                            </span>
                        </div>
                        <!-- //获取群 -->
                        <div class="selectGroup" v-show="!selectGroup.isSelectGroup">
                            <div class="showtip" v-if="showTips">暂无数据！</div>
                            <div class="rank">
                                <ul
                                        v-infinite-scroll="loadMore"
                                        infinite-scroll-disabled="loading"
                                        infinite-scroll-distance="20">
                                    <li v-for="(item, index) in rankList" :key="index">
                                        <span>
                                            <div class="group_name">{{item.group_name}}</div>
                                            <div class="group_count">过去一周{{item.group_count}}条发现</div>
                                        </span>
                                        <span>
                                            <img src="http://rs.static.quanc.com.cn/activies/aiAssistant/open.png" alt="" v-show="item.group_status==1">
                                            <img src="http://rs.static.quanc.com.cn/activies/aiAssistant/off.png" alt="" v-show="item.group_status==0">
                                        </span>
                                        <span>
                                            <input type="checkbox" :value="index" v-model="selectArr" @click="singelg(item.group_id)">
                                        </span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        
                        <div class="selectFriend" v-show="selectGroup.isSelectGroup">
                            <div class="showtip" v-if="selectFriend.showTips">暂无数据！</div>
                            <div class="rank">
                                <ul
                                        v-infinite-scroll="loadMores"
                                        infinite-scroll-disabled="selectFriend.loading"
                                        infinite-scroll-distance="20">
                                    <li v-for="(item, index) in selectFriend.rankList" :key="index">
                                        <span>
                                            <div class="group_name">{{item.name}}</div>
                                            <div class="group_count">{{item.signature?item.signature:'暂无个性签名'}}</div>
                                        </span>
                                        <span>
                                            <input type="checkbox" :value="index" v-model="selectArrf" @click="singelf(item.friendId)">
                                        </span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="allPushStart" v-show="allpush.isShow3">
                    <div class="btns">
                        <span @click="top(2)">上一步</span>
                        <span @click="sendMessage()">确认推送</span>
                    </div>
                    <div class="allPushM">
                        <p>您即将把下面的信息推送给<span>{{allpush.groupList.length}}个</span>群，<span>{{allpush.friendList.length}}</span>个好友</p>
                        <div class="allpushText">
                            <p>{{allpush.startText}}</p>
                            <a :href="allpush.link">{{allpush.link}}</a>
                            <p>{{allpush.endText}}</p>
                        </div> 
                    </div>
                </div>
            </div>
            <div class="keyWordContent" v-show="isShow[3]">
                <div class="keyWordarea">
                    <div class="area-title">
                        <span></span>关键词语料选择<span></span>
                    </div>
                    <div class="keyWordlist">
                        <!-- <div class="showtip" v-if="showTips">暂无数据！</div> -->
                        <div class="rank">
                            <ul>
                                <li v-for="(keyWord, index) in getKeywordList" :key="index">
                                    <span>
                                        {{keyWord.keyWord}}
                                    </span>
                                    <span>
                                      <p>{{keyWord.corpus}}</p>
                                    </span>
                                    <span>
                                        <img src="http://rs.static.quanc.com.cn/activies/aiAssistant/open.png" alt="" v-show="keyWord.status==1">
                                        <img src="http://rs.static.quanc.com.cn/activies/aiAssistant/off.png" alt="" v-show="keyWord.status==null">
                                    </span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        

        <div class="msg" v-show = "isQrCode">
            <div class="qrCode">
                <img v-lazy="qrCodeUrl" alt="">
            </div>
            <div class="close">
               <span @click="close">X</span>
            </div> 
        </div>
        <div class="hasPower" v-show = "isPower">
        	<p> 机器人正在准备中，请稍候...</p>
        </div>
    </div>
</template>
<script>
import {MessageBox} from "mint-ui";
import Vue from "vue";
import { InfiniteScroll } from 'mint-ui';
Vue.use(InfiniteScroll);
import axios from "axios";
import utils from "@/utils/utils";
import Cookies from "js-cookie";
import Qs from "qs";
import AliUpload from "@/components/common/AliUpload";
import request from "@/utils/request";
export default {
    data(){
        return {
            ismyChart:false,
            ismyCharts: false,
          getKeywordList:[],//关键词
          selectArr: [],  //选中群
          selectArrf: [], //选中好友
          checked : false,
          allpush:{
             isShow1: true,
             isShow2: false,
             isShow3: false,
             startText: '',
             endText: '',
             groupList:[],
             friendList:[],
             link: '',
             activity1: false,
             activity2: false,
             activity3: false
          },
          selectGroup:{
             isSelectGroup: false,
             loading: true,
             showTips: false,
             rankList:[],
             pageIndex: 1,
          },
          selectFriend:{
             loading: true,
             showTips: false,
             rankList:[],
             pageIndex: 1,
          },
        //   上传图片
          url: [],
          multiple: true,
          id: 'upImg',
          len: 1,

          loading: true,
        //   offset:0,
          showTips: false,
          rankList:[],
          pageIndex: 1,

        //   openId: Cookies.get("openid"),
          openId: 'oj3y9wG78VUHc9lcn-f-nE60_NOM',
        //   startInterval: null,
          startIntervals: null,
          isStart: true,   //是否开启
          isPower:false,   //授权蒙板
          aiSwitchList:[ 
              {
              id: 0,
              content: '微信群内容监控',
              switch: false,
              imgSrc: 'http://rs.static.quanc.com.cn/activies/aiAssistant/wxGroup2.png',
             },{
              id: 1,
              content: '好友聊天跟进',
              switch: false,
              imgSrc: 'http://rs.static.quanc.com.cn/activies/aiAssistant/friendChart2.png',
             },{
              id: 2,
              content: '线索短信通知',
              switch: false,
              imgSrc: 'http://rs.static.quanc.com.cn/activies/aiAssistant/sms2.png',
             }
          ],
          aiTabList:[
             {
               isActive: true,
               tabText:'报表'
             },{
               isActive: false,
               tabText:'群列表'
             },{
               isActive: false,
               tabText:'全推'
             },{
               isActive: false,
               tabText:'关键词'
             }
          ],
          isQrCode: false,  //是否开启
          qrCodeUrl:'',  //开启的授权二维码
          myChart: '',
          myCharts: '',
          isShow:[true, false, false, false],
          reportFormList:[], //报表的假数据
        }
    },
    filters: {
        getFullTimes(time){
           return utils.getFullTime(time)
        } 
    },
    components: {
        AliUpload
    },
    watch : {
        selectArr(curVal){
            if(curVal.length == this.rankList.length){
                this.checked = true
            }else{
                this.checked = false
            }
        },

        selectArrf(curVal){
            if(curVal.length == this.selectFriend.rankList.length){
                this.checked = true
            }else{
                this.checked = false
            }
        }
    },
    methods: {
        // 关
        no(id){
          this.aiSwitchList[id].switch=false;
          let _self = this;
          switch(id){
              case 0: _self.setGroupMonitor(0);
              break;
              case 1: _self.setFriend(0);
              break;
              default: _self.setSmsNotice(0);
          } 
        },

        //开
        off(id){
          let _self = this;
          _self.aiSwitchList[id].switch=true;
          switch(id){
              case 0: _self.setGroupMonitor(1);
              break;
              case 1: _self.setFriend(1);
              break;
              default: _self.setSmsNotice(1);
          }
        },
        //设置好友监控
        // /assistant/config/setFriendMonitor/{openId}/{status}
        setFriend(status){
            let _self = this;
            axios.post(`${_self.global.API_AI_FORUM_URL}/assistant/config/setFriendMonitor/${_self.openId}/${status}`,{

            }).then(response => {

            })
        },
        //设置群组/assistant/config/setGroupMonitor/{openId}/{status}
        setGroupMonitor(status){
            let _self = this;
            axios.post(`${_self.global.API_AI_FORUM_URL}/assistant/config/setGroupMonitor/${_self.openId}/${status}`,{

            }).then(response => {
               
            })
        },
        //设置短信/assistant/config/setSmsNotice/{openId}/{status}
        setSmsNotice(status){
            let _self = this;
            axios.post(`${_self.global.API_AI_FORUM_URL}/assistant/config/setSmsNotice/${_self.openId}/${status}`,{

            }).then(response => {

            })
        },

        //开启
        start(){
            let _self = this;
            //开启监听
            if(_self.isStart == false){
            	return
            }else{
            	_self.isPower = true;
            	axios.post(`${_self.global.API_AI_FORUM_URL}/assistant/startClient/${_self.openId}`,{

	            }).then(response => {
	                if(response.code==0){
	//                _self.isStart = false;
	//                _self.isQrCode = true;
	                }
	            })
            }

            
        },

        //关闭
        close(){
            this.isQrCode = false;
            this.isStart = true;
        },

        //切换tab
        toggleBar(index){
            this.aiTabList.forEach((v, i)=>{
               this.aiTabList[i].isActive=false;
               this.isShow[i]=false;
               if(index==i){
                  this.aiTabList[index].isActive=true
                  this.isShow[index]=true
                  switch(index){
                      case 0: this.getReportForm();
                      break;
                      case 1: this.getGroupList();
                      break;
                      case 2: this.getAllpush();
                              this.loadMores();
                      break;
                      default: this.getKeyword();  
                  }
               }
            });            
        },

        //获取报表列表
        getReportForm(){
           console.log(1)
        },
        
        //获取群列表
        getGroupList(){
        //    群列表/assistant/messag/getGroup
            let _self = this;
            _self.loading = true;
            let query = {
                openId: _self.openId,
                // openId: 'dengfan',
                pageNo: _self.pageIndex
            }
            axios.post(`${_self.global.API_AI_FORUM_URL}/assistant/messag/getGroup?${Qs.stringify(query)}`,{

            }).then(response => {
            	console.log(response.data.list)
                _self.loading = false;
                _self.pageIndex++;
               if(response.data){
                   if(response.data.totalCount <= 0){
                        _self.showTips = true
                        _self.loading = true;
                   }else{
                        _self.showTips = false;
                        _self.loading = false;
                        _self.rankList = _self.rankList.concat(response.data.list);
                        if (_self.rankList.length >= response.data.totalCount) {
                            //无更多数据
                            _self.loading = true;
                        }        
                   }
                    // _self.drawLine2(response.data)
                //    return response.data
               }else{
                  console.log('暂无数据')
               }
            })

        },
        loadMore() {
            this.getGroupList();
        },
        loadMores(){
            // this.selFriend();
        },
        //全选群
        selectallg(event){
            if (!event.currentTarget.checked) {
                this.allpush.groupList=[];
                this.selectArr = [];
            } else { //实现全选
                this.allpush.groupList=[];
                this.selectArr = [];
                this.rankList.forEach((item, i) =>{
                   this.selectArr.push(i);
                   this.allpush.groupList.push(item.group_id)
                });
            }
        },
        singelg(v){
            // console.log(v)
          this.allpush.groupList = this.allpush.groupList.concat(v)
        },
        //全选好友
        selectallf(event){
            if (!event.currentTarget.checked) {
                this.selectArrf = [];
                this.allpush.friendList =[];
            } else { //实现全选
                this.selectArrf = [];
                this.allpush.friendList =[];
                this.selectFriend.rankList.forEach((item, i) =>{
                   this.selectArrf.push(i);
                   this.allpush.friendList.push(item.friendId)
                });
            }
        },
        singelf(v){
           this.allpush.friendList = this.allpush.friendList.concat(v);
        },

        //获取全推
        getAllpush(){
           console.log(3)
        },
        //提交一些字段群发消息 /assistant/sendMessage  
        sendMessage(){
            let _self = this;
            request
            .post('http://120.77.80.74/wx-api/assistant/sendMessage', {
                 end: _self.allpush.endText, 
                friendList: _self.allpush.friendList,
                groupList: _self.allpush.groupList,
                link: _self.allpush.link,
                openId: _self.openId,
//              picUrl: encodeURIComponent(_self.url) ,
				picUrl: _self.url[0],
                start: _self.allpush.startText
            })
            .then(response => {
                if(response.code === 0) {
                	return MessageBox.alert('推送成功', "提示");
                }
            }); 
        },
        //上传图片
        changeUrl(urls){
            this.url= urls
        },
        //下一步
        next(id){
            let _self = this;
            if(id==1){
                if (!_self.allpush.startText) {
                    return MessageBox.alert("请填写启始文案", "提示");
                }else{
                    _self.allpush.activity1 = true;
                    _self.allpush.isShow1=false;
                    _self.allpush.isShow2 = true;
                }
            }else if(id==2){
                _self.allpush.activity2 = true;
                _self.allpush.isShow1=false;
                _self.allpush.isShow2 = false;
                _self.allpush.isShow3 = true;
                // _self.sendMessage()
            }
        },
        //上一步
        top(id){
            let _self = this;
            if(id==1){
                _self.allpush.isShow1=true
                _self.allpush.isShow2 = false
                _self.allpush.isShow3 = false
            }else{
                _self.allpush.isShow1=false;
                _self.allpush.isShow2 = true;
                _self.allpush.isShow3 = false;
            }
        },
        selGroup(){
            let _self = this; 
            _self.checked = false;
            _self.selectGroup.isSelectGroup =false;
           _self.getGroupList(); 
        },

        // 获取好友/assistant/friend/getFriends
        selFriend(){
           let _self = this;
            _self.checked = false;
            _self.selectGroup.isSelectGroup =true;
            _self.selectFriend.loading = true;
            let query = {
                openId: _self.openId,
                // openId: 'dengfan',
                pageNo: _self.selectFriend.pageIndex
            }
            axios.post(`${_self.global.API_AI_FORUM_URL}/assistant/friend/getFriends?${Qs.stringify(query)}`,{

            }).then(response => {
                _self.selectFriend.loading = false;
                _self.selectFriend.pageIndex++;
               if(response.data){
                   if(response.data.totalCount <= 0){
                        _self.selectFriend.showTips = true;
                        _self.selectFriend.loading = true;
                   }else{
                        _self.selectFriend.showTips = false;
                        _self.selectFriend.loading = false;
                        _self.selectFriend.rankList = _self.selectFriend.rankList.concat(response.data.list);
                        if (_self.selectFriend.rankList.length >= response.data.totalCount) {
                            //无更多数据
                            _self.selectFriend.loading = true;
                        }        
                   }
                    // _self.drawLine2(response.data)
                //    return response.data
               }else{
                  console.log('暂无数据')
               }
            })    
        },
        //获取关键词/assistant/info/selectKeyWords/{openId}
        getKeyword(){
           let _self = this;
            axios.get(`${_self.global.API_AI_FORUM_URL}/assistant/info/selectKeyWords/${_self.openId}`,{

            }).then(response => {
                _self.getKeywordList = _self.getKeywordList.concat(response.data)
            })
        },

        //最新发现 /assistant/messag/latestHits
        newFind(){
            let _self = this;
            let query = {
                openId: _self.openId
                // openId: 'dengfan'
            }
            axios.post(`${_self.global.API_AI_FORUM_URL}/assistant/messag/latestHits?${Qs.stringify(query)}`,{

            }).then(response => {
               if(response.data){
                   _self.reportFormList = response.data.list
                   console.log(_self.reportFormList)
                //    return response.data
               }else{
                  console.log(暂无数据)
               }
            })
        },
        //跳转详情
        goDetail(id){
        	this.$router.push({path:'/detailInfo',query:{id:id}})
        },
		goGroupDetail(name ,status){
            if(status==1){
                this.$router.push({path:'/groupDetails',query:{name:name}})
            }
		},
        //所有发现
        allFind(){
            this.$router.push({path:'/allFind'})
        },

        //活跃群分析/assistant/messag/lastWeekGroup
        lastWeekGroup(){
            let _self = this;
            let query = {
                openId: _self.openId
                // openId: 'dengfan'
            }
            axios.post(`${_self.global.API_AI_FORUM_URL}/assistant/messag/lastWeekGroup?${Qs.stringify(query)}`,{

            }).then(response => {
               if(response.data[0]){
                    _self.ismyCharts=true;
                    this.myCharts = this.$echarts.init(document.getElementById('myCharts'));
                    _self.drawLine2(response.data)
                //    return response.data
               }else{
                   _self.ismyCharts=false;
                  console.log('暂无数据')
               }
            })
        },

        //热点分析/assistant/messag/lastWeekHots
        lastWeekHots(){
            let _self = this;
            let query = {
                openId: _self.openId
                // openId: 'dengfan'
            }
            axios.post(`${_self.global.API_AI_FORUM_URL}/assistant/messag/lastWeekHots?${Qs.stringify(query)}`,{

            }).then(response => {
                if(response.data[0]){
                    _self.ismyChart=true;
                     this.myChart = this.$echarts.init(document.getElementById('myChart'));
                   _self.drawLine1(response.data)
               }else{
                   _self.ismyChart=false;
                  console.log('暂无数据')
               }
            })
        },

        //绘制图表
        drawLine1(data){
            console.log(data)
            let dx = [];
            let dy = [];
            data.forEach( item => {
            	console.log(item.hit_words.length)
            	if(item.hit_words.length<=5){
            		dx.push(item.hit_words)	
            	}else{
            		dx.push(item.hit_words.slice(0,5)+'...');
            	}
                
                dy.push(item.hit_count);
            })
            let _self = this;
            let canvas = document.createElement('canvas');
            // let ctx = canvas.getContext('2d');
            canvas.width = 90;
            canvas.height = 100;
           _self.myChart.setOption({
               title: [{
                   text: '热点分析',
                   subtext: '总计',
                   x: '50%',
                   textAlign: 'center',
               }],
               color: ['#3398DB'],
               grid: [{
                    top: 50,
                    width: '90%',
                    bottom: '5%',
                    left: 5,
                    containLabel: true
                }],
                xAxis: [{
                    type: 'value',
//                  max: 100,
                    splitLine: {
                        show: false
                    }
                    }],
                yAxis: [{
                    type: 'category',
                    data: dx,
                    axisLabel: {
                        interval: 0,
                        rotate: 30
                    },
                    splitLine: {
                        show: false
                    }
                }],
                series: [{
                    type: 'bar',
                    stack: 'chart',
                    z: 3,
                    label: {
                        normal: {
                            position: 'right',
                            show: true
                        }
                    },
                    data: dy
                }]
           })
        },
        drawLine2(data){
            let dx = [];
            let dy = [];
            data.forEach( item => {
            	console.log(item.group_name)
            	if(item.group_name == null){
            		return
            	}
            	if(item.group_name.length<=5){
            		dx.push(item.group_name)	
            	}else{
            		dx.push(item.group_name.slice(0,5)+'...');
            	}
                dy.push(item.message_count);
            })
            let _self = this;
            let canvas = document.createElement('canvas');
            canvas.width = 90;
            canvas.height = 100;
           _self.myCharts.setOption({
               title: [{
                   text: '活跃群分析',
                   subtext: '总计',
                   x: '50%',
                   textAlign: 'center',
               }],
               grid: [{
                    top: 50,
                    width: '90%',
                    bottom: '5%',
                    left: 5,
                    containLabel: true
                }],
                xAxis: [{
                    type: 'value',
//                  max: 1000,
                    splitLine: {
                        show: false
                    }
                    }],
                yAxis: [{
                    type: 'category',
                    data: dx,
                    axisLabel: {
                        interval: 0,
                        rotate: 30
                    },
                    splitLine: {
                        show: false
                    }
                }],
                series: [{
                    type: 'bar',
                    stack: 'chart',
                    z: 3,
                    label: {
                        normal: {
                            position: 'right',
                            show: true
                        }
                    },
                    data: dy
                }]
           })
        },
        

        //进入助手
        enter(){
            let _self = this;
            // let query = {
            //     openId: Cookies.get("openid")
            // }
            // axios.post(`${_self.global.API_AI_FORUM_URL}/assistant/enter/${Qs.stringify(query)}`,{

            // }).then(response => {

            // })
            axios.post(`${_self.global.API_AI_FORUM_URL}/assistant/enter/${_self.openId}`,{

            }).then(response => {
                if(response.data.groupMonitor==1){
                    // 群组
                    _self.aiSwitchList[0].switch = true;
                }
                if(response.data.friendMonitor==1){
                    // 好友
                    _self.aiSwitchList[1].switch = true;
                }
                if(response.data.smsNotice==1){
                    //短信
                    _self.aiSwitchList[2].switch = true;
                }
            })
        },

        //查询开启状态
        clientStatus(){
            let _self = this;
            axios.get(`${_self.global.API_AI_FORUM_URL}/assistant/queryClientStatus/${_self.openId}`,{

            }).then(response => {
                if(response.data.type=='stop'){
                    //显示点击按钮
                    return
                } 
                if(response.data.type=='login'&&response.data.message[0]==1){
                   //授权成功 清除定时器
                   
					_self.isStart = false;
                    _self.isPower = false;
                   window.clearInterval(_self.startInterval);
                   return
                }
                if(response.data.type=='login'&&response.data.message[0]==0){
                   //授权成功 清除定时器
                   
					_self.isStart = false;
					_self.isPower = false;
                   window.clearInterval(_self.startInterval);
                   return
                }
                if(response.data.type=='login'&&response.data.message[0]==-1){
                   //授权失败
                   return MessageBox.alert(response.data.message[1], "提示");
                }
                if(response.data.type=='input_qrcode'){
                    // return 显示二维码
//                  _self.qrCodeUrl = response.data.message[0];
//					return MessageBox.alert('扫码授权登陆', "提示");
					_self.isPower = true;
//                  window.clearInterval(_self.startInterval);
                }
            })
        }
    },
    mounted(){
        this.newFind() //最新发现
        this.loadMore() //选择群
        this.lastWeekGroup()
        this.lastWeekHots()
        this.clientStatus() 
        //默认展示群列表
        // this.getReportForm()
        // this.myChart = this.$echarts.init(document.getElementById('myChart'));
        // this.myCharts = this.$echarts.init(document.getElementById('myCharts'));
        // this.drawLine1()
        // this.drawLine2()
        this.enter()

        let _self = this;
        _self.startInterval=window.setInterval(() => {
             window.setTimeout(function(){
                _self.clientStatus()
            }, 2000)
        },2000)

        _self.startIntervals=window.setInterval(() => {
             window.setTimeout(function(){
                _self.newFind()
            }, 5000)
        },5000)
        // window.clearInterval(_self.startInterval); //清除


        //默认开启
        //开启群
//      if(_self.aiSwitchList[0].switch){
//          _self.setGroupMonitor(1)
//      }
//
//      if(_self.aiSwitchList[2].switch){
//          _self.setSmsNotice(1);
//      }
        
    }
}
</script>
<style lang="stylus" scoped>
.assistant{
    position absolute
    top 0
    left 0
    right 0
    bottom 0
    width 100%
}
.aiTitle{
    width 100%
    height 1rem
    line-height 1rem
    font-size .32rem
    color #000
    text-align center
}
.aiSwitchList{
    width: 90%;
    margin: 0 auto;
    padding .3rem  0;
    box-sizing border-box
    display flex
    justify-content space-between
    border-bottom 1px solid #ececec
    line-height: .5rem;
}
.aiSwitchList>span{
    padding 0 .2rem
    display block
}
.aiSwitchList>span>img{
    width .34rem
    height .34rem
    margin-right: .2rem
}
.aiSwitchList>span>img:nth-child(2){
    width 2.62rem
    height .34rem
}
.aiSwitchList>span>img:nth-child(3){
    width 2.58rem
    height .33rem
}
.aiSwitch>span{
    padding 0 .2rem
    display block
}
.aiSwitch>span>img{
    width 1.03rem
    height .44rem
}
.start{
    width 100%
    text-align center
}
.start>span{
    padding .5rem 0 .2rem 0
    display block
}
.start>p{
    color #4e4e4e
    font-size .32rem
    padding-bottom .4rem
}
.start>span>img{
    width 2.65rem
    height 2.69rem
}
.aiList{
    width 100%
}
.aiList .aiTab{
    width 90%
    display flex
    justify-content space-between
    box-sizing border-box
    background #fbf8f1
    border 1px solid #f4ad4b
    margin 0 auto
}
.aiList .aiTab .reportForm{
    width 1.5rem
    height .7rem
    line-height .7rem
    text-align center
}
.aiList .aiTab .reportForm>span{
    display block
    position relative
    width 100%
    height 100%
}
// 报表
.reportFormContent{
    width 100%
    padding .2rem .5rem
    box-sizing border-box
    height 100%
}
.reportFormContent .reportFormBtn{
    width 100%
    padding .3rem 0
    height .8rem
    line-height .8rem
    text-align center
    display flex
    justify-content space-between
}
.reportFormContent .reportFormBtn>span{
    display block
    width 1.8rem
    height .6rem
    line-height .6rem
    border-radius .1rem
    background #faf9f0
}
.reportFormContent .reportFormBtn>span:nth-child(2){
    border-radius .1rem
    background #f4ad4b
    color #fff
}
.reportFormContent .reportFormList>ul{
    width 100%
}
.reportFormContent .reportFormList>ul>li{
    display flex
    border-bottom 1px solid #ececec
    justify-content space-between
}
.reportFormContent .reportFormList>ul>li .rfContent{
    
}
.reportFormContent .reportFormList>ul>li .rfIcon{
    line-height 1rem
    width .4rem
    text-align center
}
.reportFormContent .reportFormList>ul>li .rfContent>p{
    color #f2ae48
    height .5rem
    line-height .5rem
    width 95%
    overflow hidden
}
.reportFormContent .reportFormList>ul>li .rfContent>p:nth-child(2){
    color #b1b1b1
}
//全推
.allPushContent{
    width 90%
    margin 0 auto
    padding-bottom .5rem
}
.allPushContent .area-title{
    width 100%
    height .4rem
    padding .3rem 0;
    border-bottom .01rem solid #ededed
    font-size .32rem
    line-height .4rem
    text-align center
}
.allPushContent .area-title>span{
    display inline-block
    vertical-align middle
    width .1rem
    height .1rem
    line-height: .3rem
    background url(http://assets.rurushishi.com/rsicon/icon0.png) no-repeat
    background-size 100% 100%
    margin 0 .2rem
}
.allPushContent .allPushTit{
    width 100%
    display flex
    justify-content space-around
}
.allPushContent .allPushTit>span{
    width 1.2rem
    height 1.2rem
    text-align center
    line-height .3rem
    padding .3rem 0
    display block
    border 1px solid #fdb546
    box-sizing border-box
    border-radius 50%
    background #faf9f0
}
.allPushContent .allPushTit .arrow{
    width .6rem
    line-height 1.2rem
    vertical-align middle
}
.allPushContent .allPushTit .arrow>img{
    width .56rem
    height .39rem
}
.allPushContent .allPushEdit{
    width 100%
}
.allPushContent .allPushEdit .btns{
    width 100%
    display flex
    justify-content space-between
    padding .3rem 0
}
.allPushContent .allPushEdit .btns>span{
    display block
    width 1.3rem
    height .5rem
    text-align center
    line-height .5rem
    background #fdb643
    color #fff
}
.allPushEditForm{
    width 100%
}
.allPushEditForm .editForm{
    width 100%
}
.allPushEditForm .editForm>p{
    width 100%
    padding .2rem 0
}
.allPushEditForm .editForm>textarea{
    border 1px solid #c9c9c9
    width 94%
    margin 0 auto
    border-radius .1rem
}
.allPushEditForm .uploadImg{
    width 100%
    position relative
    min-height 3.5rem 
}
.allPushEditForm .uploadImg>p{
    width 100%
    height .3rem
    padding .2rem 0
}
.allPushEditForm .uploadImg>img{
    width 2.37rem
    height 1.67rem
}
.allPushEditForm .uploadImg .upImg{
    position absolute
    top .7rem
    left 50%
    display block
    max-width 40%
    max-height 3.5rem
    float right
}
.allPushEditForm .uploadImg .upImg img{
    width: 3rem;
    height: 3rem;
    display: block;
}
.allPushM{
    width 96%
    margin 0 auto
    height .7rem
    line-height .7rem
}
.allPushM>p{
    width 100%
}
.allPushM>p>span{
    color #f5ad49
}
.allpushText{
    padding .2rem
    width 100%
    min-height 2rem
    background #eeeeee
    box-sizing border-box
    margin-bottom 1rem
}
allpushText>p{
    width 100%
    height .7rem
    line-height .7rem
}
allpushText>a{
    color #6496d7
}
.btns{
    width 100%
    display flex
    justify-content space-between
    padding .3rem 0
}
.btns>span{
    display block
    width 1.3rem
    height .5rem
    text-align center
    line-height .5rem
    background #fdb643
    color #fff
}
//全选
.btnse{
    width 96%
    margin 0 auto
    display flex
    justify-content space-between
    padding .3rem 0
}
.btnse>span{
    display block
    width 1.5rem
    height .5rem
    text-align center
    line-height .5rem
    border .01rem solid #fdb645
    border-radius .25rem
}
.arrowDown{
    position absolute
    bottom -.18rem
    left .6rem
    width 0
    height 0
    border-left .15rem solid transparent
    border-right  .15rem solid transparent
    border-top .18rem solid #f4ad4b
}
.edit1{
    background #fdb546 !important
    color #fff
}
.edit2{
    background #fdb546 !important
    color #fff
}
.edit3{
    background #fdb546 !important
    color #fff
}
.active{
    background #f4ad4b
    color #fff
}

.aiList .aiTab .groupList{
    width 1.5rem
    height .7rem
    line-height .7rem
    text-align center
}
.aiList .aiTab .allPush{
    width 1.5rem
    height .7rem
    line-height .7rem
    text-align center
}
.aiList .aiTab .keyWord{
    width 1.5rem
    height .7rem
    line-height .7rem
    text-align center
}
.myChart{
    width 100%
    height 6rem
}
.myCharts{
    width 100%
    height 6rem
}
.rank{
    margin 0 auto;
    width 90%
    padding-top .2rem
}
.rank>ul{
    width: 100%
    height 1.2rem
}
.rank>ul>li{
    display flex
    height 1rem
    justify-content space-between
    border-bottom 1px solid #cacaca
    line-height 1rem
}
.rank>ul>li>span .group_name{
    line-height .5rem
}
.rank>ul>li>span .group_count{
    line-height .5rem
}
.rank>ul>li>span:nth-child(2)>img{
    width 1.03rem
    height .34rem
}

//群列表
.groupListContent .rank{
    margin 0 auto;
    width 90%
    padding-top .2rem
}
.groupListContent .rank>ul{
    width: 100%
    height 1.2rem
}
.groupListContent .rank>ul>li{
    display flex
    height 1rem
    // justify-content space-between
    border-bottom 1px solid #cacaca
    line-height 1rem
}
.groupListContent .rank>ul>li>span:nth-child(1){
    width 60%
    overflow hidden
}
.groupListContent .rank>ul>li>span:nth-child(1) .group_name{
    line-height .5rem
    overflow hidden
}
.groupListContent .rank>ul>li>span:nth-child(1) .group_count{
    line-height .5rem
}
.groupListContent .rank>ul>li>span:nth-child(2)>img{
    width 1.03rem
    height .34rem
}
.groupListContent .rank>ul>li>span:nth-child(3){
    width .6rem
    text-align center
}


.selectGroup .rank{
    margin 0 auto;
    width 90%
    padding-top .2rem
}
.selectGroup .rank>ul{
    width: 100%
    height 1.2rem
}
.selectGroup .rank>ul>li{
    display flex
    height 1rem
    // justify-content space-between
    border-bottom 1px solid #cacaca
    line-height 1rem
}
.selectGroup .rank>ul>li>span:nth-child(1){
    width 60%
    overflow hidden
}
.selectGroup .rank>ul>li>span:nth-child(1) .group_name{
    line-height .5rem
    overflow hidden
}
.selectGroup .rank>ul>li>span:nth-child(1) .group_count{
    line-height .5rem
}
.selectGroup .rank>ul>li>span:nth-child(2)>img{
    width 1.03rem
    height .34rem
}
.selectGroup .rank>ul>li>span:nth-child(3){
    width .6rem
    text-align center
}
//关键词
.keyWordarea .area-title{
    width 100%
    height .4rem
    padding .3rem 0;
    border-bottom .01rem solid #ededed
    font-size .32rem
    line-height .4rem
    text-align center
}
.keyWordarea .area-title>span{
    display inline-block
    vertical-align middle
    width .1rem
    height .1rem
    line-height: .3rem
    background url(http://assets.rurushishi.com/rsicon/icon0.png) no-repeat
    background-size 100% 100%
    margin 0 .2rem
}
.keyWordlist>rank{
    margin 0 auto;
    width 90%
    padding-top .2rem
}
.keyWordlist .rank>ul{
    width: 100%
    height 1.2rem
}
.keyWordlist .rank>ul>li{
    // display flex
    height 1.2rem
    // justify-content space-between
    border-bottom 1px solid #cacaca
    line-height 1.2rem
}
.keyWordlist .rank>ul>li>span{
    display block
}
.keyWordlist .rank>ul>li>span:nth-child(1){
    width 3.5rem
    overflow hidden
    height 1.2rem
}
.keyWordlist .rank>ul>li>span:nth-child(2){
    flex 1
}
.keyWordlist .rank>ul>li>span:nth-child(2)>p{
    width 4rem
    text-align left
    margin-top: .2rem
    height .8rem
    line-height .4rem
    display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}
.keyWordlist .rank>ul>li>span:nth-child(3)>img{
    width 1.03rem
    height .34rem
}
.keyWordlist .rank>ul>li>span:nth-child(1) .keyWord{
    width 3rem
    line-height 1rem
    color #000
}
.msg{
    position fixed
    top 0 
    left 0
    width 100%
    height 100%
    background #ffffff
    opacity .9
    line-height 100%
}
.msg .qrCode{
    padding-top 40%
    width 4rem
    height 4rem
    margin 0 auto
}
.msg .qrCode>img{
    width 100%
    height 100%
}
.msg .close{
    padding-top: 0.4rem;
    text-align: center;
    width: 100%;
}
.msg .close>span{
    font-size: 0.32rem;
    border-radius: 50%;
    border: 1px solid #fcc24c;
    width: .5rem;
    height: .5rem;
    line-height: .5rem;
    display: inline-block;
}
.showtip{
    width 100%
    color #f5ad49
    padding .5rem 0
    text-align center
}
.hasPower{
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background: rgba(0,0,0,.8);
	color: white;
	z-index: 999;
}
.hasPower p{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width: 100%;
	text-align: center;
	height: 1rem;
	line-height: 1rem;
}
</style>


